<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body{
            margin: 0;
            background-image: url("images/bg.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        #app{
            text-align: center;
        }
        h1{
            font-size: 48px;
            color: rgb(0,150,215);
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>欢迎登录</h1>
    <el-card style="width: 30%; height:300px; margin: 10% auto;background-color:rgba(0,255,255,0.2);padding: 50px">
        <el-form style="width: 80%;margin: 0 5%; " label-width="60px" label-position="left">
            <el-form-item  style="font-size: 24px;color: black;margin-top: 50px">
                <el-input type="text" v-model="user.username" placeholder="请输入用户名"style="font-size: 20px;color: black">
                </el-input>
            </el-form-item>
            <el-form-item  style="font-size: 24px;color: black">
                <el-input type="password" v-model="user.password" placeholder="请输入密码"style="font-size: 20px;color: black">
                </el-input>
            </el-form-item>
            <el-form-item  style="margin-top:30px;margin-left: 0%">
               <el-button style="width: 80px;height: 50px;font-size: 20px;margin-top: 60px"  @click="login()" >登录
               </el-button>
                <el-button style="width: 80px;height: 50px;font-size: 20px;margin-top: 60px"@click="location.href='reg.html'">注册
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el:"#app",
        data:{
            user:{
                username:"",
                password:"",
            }
        },
        methods:{
            login(){
                axios.post("/login",v.user).then(function (response){
                   if (response.data==1) {
                       console.log(response.data);
                       v.$message.success("登陆成功");
                       location.href = "/";
                   }
                    else{
                        v.$message.error("账号或密码有误");
                        setTimeout(function (){location.reload();},1000)
                    }

                })

            }
        }
    })
</script>
</body>
</html>